<template>
  <div class="per-teacher-wrapper">
    <div class="per-teacher-form-wrapper">
      <el-form class="per-teacher-form"
               ref="teacherForm"
               v-model="teacher">
        <el-row>
          <el-col :span="24">
            <el-form-item label="老师名字:">
              {{teacher.name}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="账号:">
              {{username}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="性别:">
              {{teacher.gender}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属学院:">
              {{teacher.department.name}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所授课程:">
              <el-tag class="per-teacher-form-course-tag" v-for="course in selectedCourses"
                      :key="course.id">{{course.name}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联系电话:">
              {{teacher.phone}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联系邮箱:">
              {{teacher.email}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="per-teacher-form-avatar">
        <img class="per-teacher-form-avatar-img" :src="teacher.face" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PerTeacher",
    data() {
      return {
        teacherIdByUser: [],
        username: '',
        teacher: {
          name: '',
          username: '',
          gender: '',
          department: {
            name: ''
          },
          phone: '',
          email: '',
          face: ''
        },
        selectedCourses: '',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }
    },
    mounted() {
      this.initTeacherIdByUser()
      this.getTeacherById()
      this.getCoursesByTeacher()
    },
    methods: {
      //  根据老师id获取老师
      getTeacherById() {
        this.getRequest('/perinformation/teacher/' + this.teacherIdByUser).then(resp => {
          if (resp) {
            this.teacher = resp
            this.teacher.face = 'data:image/jpeg;base64,' + this.teacher.face
          }
        })
      },
      //  根据老师id获取课程
      getCoursesByTeacher() {
        this.getRequest('/perinformation/teacher/course/' + this.teacherIdByUser).then(resp => {
          if (resp) {
            this.selectedCourses = resp
          }
        })
      },
      //  获取当前操作系统的老师的id
      initTeacherIdByUser() {
        let user = JSON.parse(window.sessionStorage.getItem('user'))
        this.teacherIdByUser = user.teacherId
        this.username = user.username
      }
    }
  }
</script>

<style lang="less">

  .per-teacher-wrapper {
    width: 90%;
    margin-top: 20px;
    margin-left: 40px;

    .per-teacher-form-wrapper {
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      padding: 20px 60px;
      display: flex;
      justify-content: space-between;

      .per-teacher-form {

        .per-teacher-form-course-tag {
          margin-right: 10px;
        }
      }

      .per-teacher-form-avatar {
        margin-right: 30px;

        .per-teacher-form-avatar-img {
          width: 150px;
        }
      }
    }
  }

</style>